<template>
  <div class="counter-container">
    <div class="counter-container-title">
      <p>预约渠道数据统计</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <div class="counter-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//获取dom
let chartsDom = ref();

let option = {
  title: {
    text: '雷达图',
    top:'20%'
  },
  legend: {
    data: ['预约渠道数据统计']
  },
  radar: {
    indicator: [
      { name: '携程旅行', max: 6500 },
      { name: '飞猪', max: 16000 },
      { name: '高德地图', max: 30000 },
      { name: '大众点评', max: 38000 },
      { name: '其它平台', max: 52000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        }
      ]
    }
  ]
};

//生命周期
onMounted(()=>{
  let mycharts = echarts.init(chartsDom.value);
  mycharts.setOption(option)
})
</script>
<script lang="ts">
export default {
    name:"Counter"
}
</script>

<style scoped>
.counter-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin-top:20px;
}

.counter-container .counter-container-title{
  margin-left: 20px;
}
.counter-container .counter-container-title p{
  color:white;
  font-size: 20px;
}

.counter-container-charts{
  height:calc(100% - 30px);
}
</style>